<template>
	<div
	  class="diy_edit order_edits page_i_want_to_customize"
	  id="i_want_to_customize_edit"
	>
	  <el-form
		:model="form"
		ref="ruleFormRef"
		:rules="rules"
		label-width="120px"
		class="edit_order_form"
		size="large"
	  >
	<el-row class="row_e">
			<el-col :xs="24" :sm="12" :lg="8" class="el_form_item_warp">
				<el-form-item label="联系人姓名" prop="contact_name">
					<el-input v-model="form.contact_name" placeholder="请输入联系人姓名"></el-input>
				</el-form-item>
			</el-col>

			<!--<el-col :xs="24" :sm="12" :lg="8" class="el_form_item_warp">-->
				<!--<el-form-item label="联系人邮箱" prop="contact_email">-->
					<!--<el-input type="email" v-model="form.contact_email" placeholder="请输入联系人邮箱"></el-input>-->
				<!--</el-form-item>-->
			<!--</el-col>-->

			<el-col :xs="24" :sm="12" :lg="8" class="el_form_item_warp">
				<el-form-item label="联系人手机" prop="contact_phone">
					<el-input type="phone" v-model="form.contact_phone" placeholder="请输入联系人手机"></el-input>
				</el-form-item>
			</el-col>

			<el-col :xs="24" :sm="12" :lg="8" class="el_form_item_warp">
				<el-form-item label="收件地址" prop="contact_address">
					<el-input v-model="form.contact_address" placeholder="请输入收件地址"></el-input>
				</el-form-item>
			</el-col>

			<!--<el-col :xs="24" :sm="12" :lg="8" class="el_form_item_warp">-->
				<!--<el-form-item label="邮政编码" prop="postal_code">-->
					<!--<el-input v-model="form.postal_code" placeholder="请输入邮政编码"></el-input>-->
				<!--</el-form-item>-->
			<!--</el-col>-->

			<el-col :xs="24" :sm="12" :lg="8" class="el_form_item_warp">
				<el-form-item label="描述" prop="description">
					<el-input v-model="form.description" placeholder="请输入描述"></el-input>
				</el-form-item>
			</el-col>

			<el-col :xs="24" :sm="12" :lg="8" class="el_form_item_warp">
				<el-form-item label="订单状态" prop="state">
					<el-select v-model="form.state" placeholder="请选择">
						<el-option v-for="o in list_state" :key="o" :label="o" :value="o">
						</el-option>
					</el-select>
				</el-form-item>
			</el-col>

			<el-col :xs="24" :sm="12" :lg="8" v-if="user_group == '管理员' || ($check_field('set','user_id') && query.order_id) || $check_field('add','user_id')" class="el_form_item_warp">
				<el-form-item label="买家" prop="user_id">
					<el-select v-model="form.user_id" placeholder="请选择">
						<el-option :key="-1" label="未选择" :value="0">
						</el-option>
						<el-option v-for="(o,i) in list_user" :key="i" :label="o.nickname" :value="o.user_id">
						</el-option>
					</el-select>
				</el-form-item>
			</el-col>
		
			<el-col :xs="24" :sm="16" :lg="16" class="el_form_item_warp">
				<el-form-item label="备注" prop="remark">
				<el-input type="textarea" v-model="form.remark" placeholder="请输入备注"></el-input>
				</el-form-item>
			</el-col>
		</el-row>
		<div class="footer">
		  <el-button type="primary" @click="Onsubmit" size="large"
			>提交</el-button
		  >
		  <el-button @click="cancel()" size="large">取消</el-button>
		</div>
	  </el-form>
	</div>
  </template>
  
  <script setup>
  import { ElMessage } from "element-plus";
  import { ref, onMounted } from "vue";
  import { $post, $get } from "@/api/Api.js";
  import storageHelper from "@/libs/StorageHelper";
  import { useStore } from "vuex";
  import { useRouter,useRoute } from "vue-router";
  import {
	$check_field,
	$get_auth,
	func,
	paramsFun,
	$fullUrl,
	formatDate,
	$banseUrl,
	$check_action,
	$getUrlParams,
	filterSensitiveWords,
  } from "@/utils/utils.js";
  let router = useRouter();
  let route = useRoute();
  let store = useStore();
  let token = storageHelper.getToken() || null;
  let UserInfo = storageHelper.getUserInfo();
  let order_id = $getUrlParams().order_id;
  let url_add = ref("/api/order/add");
  let url_set = ref("/api/order/set");
  let url_get_obj = ref("/api/order/get_obj");
  let url_upload = ref("/api/order/upload");
  let title = ref("order");
  let field = ref("order_id");
  let list_user = ref([]);
  let list_state = ref(["待付款", "已付款"]);
  let form = ref({
	order_id: 0,
	order_number: "",
	goods_id: 0,
	title: "",
	img: "",
	price: 0,
	price_ago: 0,
	num: 0,
	price_count: 0,
	norms: "",
	contact_name: "",
	contact_email: "",
	contact_phone: "",
	contact_address: "",
	postal_code: "",
	user_id: 0,
	merchant_id: 0,
	description: "",
	state: "",
	remark:""
  });
  
	let ruleFormRef = ref(null);
	let rules = ref({
		contact_name: [
		{
			required: true,
			message: "联系人姓名不能为空",
			trigger: "blur",
		},
		],
	});
	// 点击取消
	let cancel = () => {
		router.go(-1);
	};
  	// 点击提交
	let Onsubmit = async () => {
		let valid = await ruleFormRef.value.validate();
		if (valid) {
		if(order_id){
				// 编辑
				delete form.value.update_time;
				$post(url_set.value+"?order_id=" + order_id, form.value).then((res) => {
					if (res.result) {
					ruleFormRef.value.resetFields();
					router.push("/home/order/table");
					ElMessage.success("提交成功！");
					} else if (res.error) {
					ElMessage.error(res.error.message);
					}
				});
			
			}
		} else {
		ElMessage.error(msg);
		}
	};
	// 获取留言详情
	let get_order_obj = async () => {
		var list = await $get("/api/order/get_obj?order_id=" + order_id);
		form.value = list.result.obj;
	};
   //获取用户
   let get_list_user = async() => {
	  var json =  await $get('/api/user/get_list')
  	    if (json.result) {
			list_user.value = json.result.list;
		} else if (json.error) {
			console.error(json.error);
		}

	}
  onMounted(() => {
	get_list_user();
	if(order_id){
		get_order_obj();
	}
  });
  </script>
  
  <style scoped lang="less">
  .diy_edit {
	width: 100%;
	.edit_order_form {
	  max-width: 60%;
	  margin: 90px auto;
	  .fn {
		width: 100%;
	  }
	}
	img {
	  width: 100px;
	  height: 100px;
	}
	.edit_list_order_sell {
	  width: 80%;
	  margin: 90px auto;
	}
	.footer {
	  text-align: center;
	}
  }
  </style>
  